// 1.插件
// vue2如何实现插件？
// 1.插件定义
// 对象定义法
// const plugin = {
//   install (vue) {
//     实现插件的核心逻辑
//   }
// }
// 函数定义法
// function plugin (vue) {
//   实现插件的核心逻辑
// }
// 2.插件注册
// Vue.use(plugin)注意需要在new实例化之前进行

// 插件可以做哪些事情
// 凡是可以依赖于vue构造函数完成的事都可以定义为插件
// 全局组件注册 Vue.component()
// 全局指令注册 Vue.directive()
// 给原型对象挂在东西，让每一个组件this Vue.prototype.$evevbBus

// vue3中插件语法的变化
// 插件定义到注册的流程没有发生变化
// 变化的是参数的语义（实参）
// const plugin={
//   install（app){
//     实现插件的核心功能
//   }
// }
// createApp().use(plugin)

// vue2里如何定义全局指令？
// Vue.directive('指令的名称',{
//   inserted(el,binding){
//     el:指令绑定到元素身上，指的是那个元素dom对象
//     binding:binsing.value指令等于后面表达式的值 v-if=“show
//   }
// })

// vue3中的全局指令的变化？
// app.directive('指令的名称'，{
//   mounted(el,binding){
//     el:指令绑定到元素身上，指的是那个元素dom对象
//     binding:binsing.value指令等于后面表达式的值 v-if=“show
//   }
// })
// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
// 导入默认图片
import defaultImg from '@/assets/images/200.png'
const direactivePlugin = {
  install (app) {
    // 当我们注册该插件的时候 vue会自动执行这个install方法
    // 并且吧app应用实例对象当成实参传入
    // 这里的app实参就是createApp方法得到的应用实例对象
    console.log(app)
    // {_uid: 0, _component: {…}, _props: null, _container: null, _context: {…},…}
    // 实现全局指令的注册即可
    // main.js注册该插件-install-传入app参数-app.directive-全局指令注册就好了
    app.directive('lazy-img', {
      mounted (el, binding) {
        console.log(el, binding)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting:元素进入到视口区域 true
            // 不在视口区域 false
            // 当首次完成图片正式加载之后 监听就应该停止才对
            console.log(isIntersecting)
            // 错误先行
            if (isIntersecting) {
              // 容错处理
              el.onerror = function () {
                el.src = defaultImg
              }
              // 正式发送请求
              el.src = binding.value
              // 停止监听
              stop()
            }
          }
        )
      }
    })
  }
  // 懒加载核心逻辑实现
  // 图片懒加载思路：只有图片进入到视口区域之后才正式发送图片链接请求
  // 1.如何知道图片进入到视口区域？
  // 如何控制图片发送请求？img.src='url'

}

// 按需导出
export default direactivePlugin
